<template>
  <div>
    <!--添加商品分类的头部区域-->
    <el-card class="box-card" shadow="never">
      <i class="el-icon-s-order" style="font-size: 18px; margin-right: 6px"></i>
      <span>添加商品分类</span>
      <!-- $router.back()  $router.push()  replace()  back()  forward()  go(-1) -->
      <el-button class="btn-add" size="mini" @click="$router.back()"
        >返回</el-button
      >
    </el-card>
    <!-- 添加分类的表单 -->
    <el-card class="form-container" shadow="never">
      <el-form
        :model="productCate"
        ref="productCateForm"
        label-width="150px"
        :rules="rules"
      >
        <el-form-item label="分类名称：" prop="name">
          <el-input v-model="productCate.name"></el-input>
        </el-form-item>
        <el-form-item label="上级分类：">
          <el-select
            placeholder="请选择上级分类"
            v-model="productCate.parent_id"
          >
            <el-option
              v-for="item in selectProductCateList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="数量单位：">
          <el-input v-model="productCate.product_unit"></el-input>
        </el-form-item>
        <el-form-item label="排序：">
          <el-input v-model="productCate.sort"></el-input>
        </el-form-item>
        <el-form-item label="分类是否启用：">
          <el-radio-group v-model="productCate.nav_status">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="移动端是否显示：">
          <el-radio-group v-model="productCate.show_status">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="分类图标：">
          <!-- 图片上传是一个单独的接口 -->
          <SingleUpload
            uploadAction="/manager/api/auth/category/upload_category"
            :successCallBack="getCategoryIcon"
          ></SingleUpload>
        </el-form-item>
        <el-form-item label="关键字：">
          <el-input v-model="productCate.keywords"></el-input>
        </el-form-item>
        <el-form-item label="描述：">
          <el-input v-model="productCate.description"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button type="danger" @click="onReset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { getCategory, addCategory } from "../../../api/categoryApi";
import SingleUpload from "../../../components/upload/SingleUpload.vue";
let defaultProductCate = {
  name: "",
  parent_id: "",
  product_unit: "",
  sort: 0,
  nav_status: 0,
  show_status: 0,
  icon: "", // 分类图标
  keywords: "",
  description: "",
};
export default {
  data() {
    return {
      productCate: Object.assign({},defaultProductCate),
      selectProductCateList: [], // 保存所有的一级分类
      rules: {
        name: [
          { require: true, message: "请输入分类的名称", trigger: "blur" },
          { min: 3, max: 20, message: "长度在 3 到 20个字符", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getProductCategoryList(); // 获取一级分类
  },
  methods: {
    // 获取所有一级分类
    getProductCategoryList() {
      getCategory(0, 1, 100).then((res) => {
        if (res.status == 1) {
          this.selectProductCateList = res.data.category_list;
          this.selectProductCateList.unshift({ id: 0, name: "无上级分类" });
        }
      });
    },
    // 图片上传成功的回调函数
    getCategoryIcon(data) {
      this.productCate.icon = data.name;
    },
    // 点击提交
    onSubmit() {
      this.$refs.productCateForm.validate(async (valid) => {
        if (valid) {
          addCategory(this.productCate).then((res) => {
            if (res.status == 1) {
              this.$message.success(res.msg);
              this.onReset(); // 清空表单数据
            } else {
              this.$message.error(res.msg);
            }
          });
        } else {
          this.$message.error("分类名称不能为空~");
          return false;
        }
      });
    },
    // 点击重置
    onReset() {
      this.$refs.productCateForm.resetFields();
      this.productCate = Object.assign({},defaultProductCate)
      this.getProductCategoryList();
    },
  },
  components: {
    SingleUpload,
  },
};
</script>

<style scoped lang="less">
.btn-add {
  float: right;
}
.form-container {
  margin-top: 20px;
}
</style>